<template>
  <a-card :bordered="false">
    <!-- 抽屉 -->
    <a-drawer
      title="滤芯列表"
      :width="screenWidth"
      @close="onClose"
      :visible="visible"
    >
      <!-- 抽屉内容的border -->
      <div
        :style="{
          padding:'10px',
          border: '1px solid #e9e9e9',
          background: '#fff',
        }">
        <div class="table-operator" style="border-top: 5px">
            <a-button @click="handleEdit(typeId)" type="primary" icon="plus">添加滤芯</a-button>
        </div>
        <div>
          <a-table
            ref="table"
            rowKey="id"
            size="middle"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange"
          >

          <span slot="action" slot-scope="text, record">
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.relationshipId)">
              <a>删除</a>
            </a-popconfirm>
          </span>
          </a-table>
        </div>
      </div>
    </a-drawer>
    <relationship-model ref="modalForm" @ok="modalFormOk"></relationship-model>
  </a-card>
</template>

<script>
  import pick from 'lodash.pick'
  import {filterObj} from '@/utils/util';
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import RelationshipModel from './model/RelationshipModel'

  export default {
    name: "RelationshipList",
    mixins: [JeecgListMixin],
    components:{RelationshipModel},
    data() {
      return {
        columns: [
          {
            title: '滤芯名称',
            align: "center",
            dataIndex: 'filterelementName',
          },
          {
            title: '可用天数',
            align: "center",
            dataIndex: 'validity',
          },
          {
            title: '最低更换天数',
            align: "center",
            dataIndex: 'replacementDays',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {customRender: 'action'},
          }
        ],
        queryParam: {
          typeId: "",
        },
        title: "操作",
        visible: false,
        screenWidth: 800,
        model: {},
        typeId: "",
        status: 1,
        labelCol: {
          xs: {span: 5},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 12},
          sm: {span: 12},
        },
        form: this.$form.createForm(this),

        url: {
          list: "/commodity/relationship/list",
          delete: "/commodity/relationship/del",
        },
      }
    },
    created() {
      // 当页面初始化时,根据屏幕大小来给抽屉设置宽度
      this.resetScreenSize();
    },
    methods: {
      add(typeId) {
        this.typeId = typeId;
        this.edit({});
      },
      edit(record) {
        if (record.id) {
          this.typeId = record.id;
        }
        this.queryParam = {}
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.model.typeId = this.typeId;
        this.model.status = this.status;
        this.visible = true;

        // 当其它模块调用该模块时,调用此方法加载字典数据
        this.loadData();
      },

      getQueryParams() {
        var param = Object.assign({}, this.queryParam);
        param.typeId = this.typeId;
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        return filterObj(param);
      },

      showDrawer() {
        this.visible = true
      },
      onClose() {
        this.visible = false
        this.form.resetFields();
        this.dataSource = [];
      },
      // 抽屉的宽度随着屏幕大小来改变
      resetScreenSize() {
        let screenWidth = document.body.clientWidth;
        if (screenWidth < 600) {
          this.screenWidth = screenWidth;
        } else {
          this.screenWidth = 600;
        }
      },
    }
  }
</script>
<style scoped>
</style>